<template>
  <div class="flex_space_between login_container">
    <div class="flex_end login_bg"></div>
    <div class="login_container_form ">
      <div class="register_logo flca">
        <div class="login_box flc">
          <div class="fs26 cGR flca wp100">
            <img src="@/assets/img/logo.png" alt="开通会员" class="w68 h68" />
          </div>
          <div class="fs26 cGR wp100 tc">万象掌柜</div>
          <div class="fs12 cGR wp100 tc">wanxiangzhanggui</div>
        </div>
      </div>
      <div class="login_container_formContent ml80">
        <el-form ref="form" class="login_form  " :model="params">
          <el-form-item prop="username">
            <label class="login_label mb12">用户名</label>
            <el-input v-model="params.username" placeholder="请输入用户名" clear="pub_input  pub_input_search" :maxlength="7">
              <img slot="prefix" src="@/assets/img/loginRegister/user.png" class="pub_imgSize16" />
            </el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <label class="login_label mb12">手机号</label>
            <el-input v-model="params.phone" placeholder="请输入手机号" clear="pub_input  pub_input_search" :maxlength="11">
              <img slot="prefix" src="@/assets/img/loginRegister/phone.png" class="pub_imgSize16" />
            </el-input>
          </el-form-item>
          <el-form-item prop="verifyCode" class="verifyCode">
            <label class="login_label mb12">验证码</label>
            <div class="flex_space_between">
              <el-input v-model="params.verifyCode" placeholder="请输入验证码" clear="pub_input  pub_input_search" :maxlength="6"> </el-input>
              <div class="verifyLabel w100" :class="{ grayLabel: countdown > 0 }" @click="sendCode">{{ verifyLabel }}</div>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <label class="login_label">设置密码</label>
            <el-input v-model="params.password" :type="isShowPas ? 'text' : 'password'" placeholder="请输入密码" class="pub_input  mt10 pub_input_search" :maxlength="15">
              <img slot="prefix" src="@/assets/img/loginRegister/password.png" class="pub_imgSize16" />
              <img v-show="!isShowPas" slot="suffix" src="@/assets/img/loginRegister/lookPassword.png" class="pub_imgSize16" @click="showPassword('isShowPas')" />
              <img v-show="isShowPas" slot="suffix" src="@/assets/img/loginRegister/closePassword.png" class="pub_imgSize16" @click="showPassword('isShowPas')" />
            </el-input>
          </el-form-item>
          <el-form-item prop="passwordAgain">
            <label class="login_label">确认密码</label>
            <el-input v-model="params.passwordAgain" :type="isShowPasAgain ? 'text' : 'password'" placeholder="请再次输入密码" class="pub_input  mt10 pub_input_search" :maxlength="15">
              <img slot="prefix" src="@/assets/img/loginRegister/password.png" class="pub_imgSize16" />
              <img v-show="!isShowPas" slot="suffix" src="@/assets/img/loginRegister/lookPassword.png" class="pub_imgSize16" @click="showPassword('isShowPasAgain')" />
              <img v-show="isShowPas" slot="suffix" src="@/assets/img/loginRegister/closePassword.png" class="pub_imgSize16" @click="showPassword('isShowPasAgain')" />
            </el-input>
          </el-form-item>
          <el-form-item v-if="showInviteCode" prop="inviteCode">
            <label class="login_label">邀请码</label>
            <el-input v-model="params.inviteCode" placeholder="请输入邀请码" class="pub_input mt10" />
          </el-form-item>
          <el-form-item prop="realName">
            <label class="login_label">真实姓名</label>
            <el-input v-model="params.realName" placeholder="创建订单需要，必填，无法修改" class="pub_input mt10" />
          </el-form-item>
        </el-form>
        <el-button type="text" class="mt16 pub_button login_button " @click="register">
          注册
        </el-button>
        <div class="login_goReigister flex_center mt12">
          <span> 已经有账号? </span>
          <span class="login_goReigister_text ml5" @click="goPage('login')">去登录</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      countdown: 0, // 倒计时秒数
      timer: null, // 定时器对象
      totalTime: 60, // 总倒计时时间
      isShowPasAgain: false, //显示密码
      isShowPas: false, //显示密码
      showInviteCode: false, // 是否显示邀请码
      params: {
        phone: '', //手机号码
        passwordAgain: '', //再次输入密码
        password: '', //密码
        username: '', //用户名
        verifyCode: '', //验证码
        inviteCode: '', //邀请码
        realName: '' //真实姓名
      }
    };
  },
  computed: {
    verifyLabel() {
      return this.countdown > 0 ? `${this.countdown} 秒后重发` : '发送验证码';
    }
  },
  mounted() {
    // 查询saveReward接口决定是否显示邀请码
    this.checkInviteCodeDisplay();
    // 获取URL参数中的inviteCode并填充到表单中
    if (this.$route.query && this.$route.query.inviteCode) {
      this.params.inviteCode = this.$route.query.inviteCode;
      // 确保邀请码输入框显示
      this.showInviteCode = true;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    // 检查是否显示邀请码
    async checkInviteCodeDisplay() {
      const response = await this.$api.get(this.$url.queryReward);
      console.log('查询saveReward接口返回:', response);
      if (response.code === 200 && response.data && response.data.settingValue === '1') {
        // settingValue为'1'时展示邀请码
        this.showInviteCode = true;
      }
    },
    //显示密码框
    showPassword(fieldName) {
      this[fieldName] = !this[fieldName];
    },
    //登录
    register() {
      let { phone, passwordAgain, password, username, verifyCode, realName } = this.params;
      if (!realName) {
        return this.$message.warning('请输入真实姓名');
      }
      if (!username) {
        return this.$message.warning('请输入用户名');
      }
      let reg = /^1(3[0-9]|4[5-9]|5[0-35-9]|6[567]()|7[0-8]|8[0-9]|9[0-9])\d{8}$/;
      if (!reg.test(phone)) {
        return this.$message.warning('请输入正确手机号');
      }
      if (!verifyCode) {
        return this.$message.warning('请输入验证码');
      }
      if (!password) {
        return this.$message.warning('请输入密码');
      } else if (this.$rules.isValidPassword(password) == false) {
        return this.$message.warning('密码只能是字母数字特殊字符大小写四选三');
      }
      if (!passwordAgain) {
        return this.$message.warning('请再次输入密码');
      }
      if (passwordAgain !== password) {
        return this.$message.warning('两次密码不一致');
      }
      this.params = {
        ...this.params,
        phoneNumber: phone
      };
      this.$api.post(this.$url.registerAdministrato, this.params).then(response => {
        if (response.code == 200) {
          this.$message.success('注册成功');
          this.goPage('login');
        }
      });
    },
    goPage(pageUrl) {
      this.$router.push({
        path: '/' + pageUrl
      });
    },
    //发送验证码
    sendCode() {
      let reg = /^1(3[0-9]|4[5-9]|5[0-35-9]|6[567]()|7[0-8]|8[0-9]|9[0-9])\d{8}$/;
      if (!reg.test(this.params.phone)) {
        return this.$message.warning('请输入正确手机号');
      }
      if (this.countdown === 0) {
        this.$api.post(this.$url.sendVerifyCode, { phoneNumber: this.params.phone, type: '1' }).then(response => {
          if (response.code == 200) {
            this.countdown = this.totalTime;
            this.timer = setInterval(() => {
              if (this.countdown > 0) {
                this.countdown--;
              } else {
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.register_logo {
  width: 100%;
  height: 220px;
}
.verifyLabel {
  color: #27c1a5;
  font-size: 14px;
  cursor: pointer;
  text-align: right;
}
.grayLabel.verifyLabel {
  color: rgba(0, 0, 0, 0.4);
}
.verifyCode {
  ::v-deep .el-input {
    width: 300px;
  }
}
</style>
